<div class="row">

  <!-- General -->
  <div class="col-md-12 status detail">
    <h4 translate>General</h4>
    <hr class="header_rule">
    <dl class="dl-horizontal">
      <dt translate>Node ID</dt>
      <dd>{$ ctrl.node.uuid | noValue $}</dd>
      <dt translate>Chassis ID</dt>
      <dd>{$ ctrl.node.chassis_uuid | noValue $}</dd>
      <dt translate>Resource Class</dt>
      <dd>{$ ctrl.node.resource_class | noValue $}</dd>
      <dt translate>Created At</dt>
      <dd>{$ ctrl.node.created_at | date:'medium' | noValue $}</dd>
    </dl>
  </div>
</div>

<div class="row">
  <!-- Ports -->
  <div class="col-md-6 status detail">
    <h4 translate>Ports</h4>
    <hr class="header_rule">
    <table hz-table ng-cloak
           st-table="ctrl.ports"
           st-safe-src="ctrl.portsSrc"
           class="table table-striped table-rsp table-detail">
      <thead>
        <tr>
          <th colspan="100" class="action-col">
            <action-list uib-dropdown class="pull-right">
              <action button-type="split-button"
                      action-classes="'btn btn-default btn-sm'"
                      callback="ctrl.createPort">
                {$ ::'Create Port' | translate $}
              </action>
              <menu>
                <action button-type="menu-item"
                        callback="ctrl.deletePort"
                        item="tCtrl.selected"
                        disabled="tCtrl.selected.length === 0">
                  <span class="fa fa-trash"></span>
                  {$ ::'Delete Ports' | translate $}
                </action>
              </menu>
            </action-list>
          </th>
        </tr>
        <tr>
          <th class="multi_select_column">
            <input type="checkbox"
                   hz-select-all="ctrl.ports"/>
          </th>
          <th>&nbsp;</th>
          <th translate class="rsp-p1" style="white-space:nowrap">
            MAC Address
          </th>
          <th translate class="rsp-p2" style="white-space:nowrap;">
            PXE Enabled
          </th>
          <th translate class="rsp-p2" style="white-space:nowrap;">
            Portgroup
          </th>
          <th translate class="actions_column">
            Actions
          </th>
        </tr>
      </thead>
      <tbody>
        <tr ng-repeat-start="port in ctrl.ports">
          <td class="multi_select_column">
            <input type="checkbox"
                   hz-select="port"
                   ng-model="tCtrl.selections[port.id].checked"/>
          <td>
            <i class="fa fa-chevron-right"
               hz-expand-detail="fa-chevron-right fa-chevron-down"
               duration="200"
               item="port"></i>
          </td>
          <td class="rsp-p1">
            {$ port.address $}
          </td>
          <td>
            {$ port.pxe_enabled $}
          <td>
            {$ port.portgroup_uuid | noValue $}
          </td>
          <td class="actions_column">
            <action-list uib-dropdown class="pull-right">
              <action button-type="split-button"
                      action-classes="'btn btn-default btn-sm'"
                      callback="ctrl.editPort"
                      item="port">
                {$ ::'Edit Port' | translate $}
              </action>
              <menu>
                <li role="presentation">
                  <a role="menuitem"
                     ng-click="ctrl.deletePort([port]);
                               $event.stopPropagation();
                               $event.preventDefault()">
                    <span class="fa fa-trash"></span>
                    <span>{$ ::'Delete Port' | translate $}</span>
                  </a>
                </li>
              </menu>
            </action-list>
          </td>
        </tr>
        <tr ng-repeat-end class="detail-row">
          <td class="detail" colspan="100">
            <hz-detail-row
               template-url="ctrl.portDetailsTemplateUrl">
            </hz-detail-row>
          </td>
        </tr>
        <tr hz-no-items
            items="ctrl.ports"
            message="ctrl.noPortsText">
        </tr>
      </tbody>
    </table>
  </div>

    <!-- Portgroups -->
  <div class="col-md-6 status detail">
    <h4 translate>Portgroups</h4>
    <hr class="header_rule">
    <table hz-table ng-cloak
           st-table="ctrl.portgroups"
           st-safe-src="ctrl.portgroupsSrc"
           class="table table-striped table-rsp table-detail">
      <thead>
        <tr>
          <th colspan="100" class="action-col">
            <action-list uib-dropdown class="pull-right">
              <action button-type="split-button"
                      action-classes="'btn btn-default btn-sm'"
                      callback="ctrl.createPortgroup">
                {$ ::'Create Portgroup' | translate $}
              </action>
              <menu>
                <action button-type="menu-item"
                        callback="ctrl.deletePortgroups"
                        item="tCtrl.selected"
                        disabled="tCtrl.selected.length === 0">
                  <span class="fa fa-trash"></span>
                  {$ ::'Delete Portgroups' | translate $}
                </action>
              </menu>
            </action-list>
          </th>
        </tr>
        <tr>
          <th class="multi_select_column">
            <input type="checkbox"
                   hz-select-all="ctrl.portgroups"/>
          </th>
          <th>&nbsp;</th>
          <th translate class="rsp-p1" style="width:100%;">
            UUID
          </th>
          <th translate class="rsp-p2" style="white-space:nowrap;">
            MAC Address
          </th>
          <th translate class="rsp-p2" style="width:white-space:nowrap;">
            Name
          </th>
          <th translate class="rsp-p2" style="width:white-space:nowrap;">
            Ports
          </th>
          <th translate class="actions_column">
            Actions
          </th>
        </tr>
      </thead>
      <tbody>
        <tr ng-repeat-start="portgroup in ctrl.portgroups">
          <td class="multi_select_column">
            <input type="checkbox"
                   hz-select="portgroup"
                   ng-model="tCtrl.selections[portgroup.id].checked"/>
          <td>
            <i class="fa fa-chevron-right"
               hz-expand-detail="fa-chevron-right fa-chevron-down"
               duration="200"
               item="portgroup"></i>
          </td>
          <td class="rsp-p1">
            {$ portgroup.uuid $}
          </td>
          <td class="rsp-p1">
            {$ portgroup.address | noValue $}
          </td>
          <td class="rsp-p1">
            {$ portgroup.name | noValue $}
          </td>
          <td class="rsp-p1">
            {$ portgroup.ports.length | noValue $}
          </td>
          <td class="actions_column">
            <action-list uib-dropdown class="pull-right">
              <action button-type="split-button"
                      action-classes="'btn btn-default btn-sm'"
                      callback="ctrl.editPortgroup"
                      item="portgroup">
                {$ ::'Edit Portgroup' | translate $}
              </action>
              <menu>
                <li role="presentation"
                    ng-class="{disabled: portgroup.ports.length > 0}">
                  <a role="menuitem"
                     ng-click="portgroup.ports.length > 0 ||
                               ctrl.deletePortgroups([portgroup]);
                               $event.stopPropagation();
                               $event.preventDefault()">
                    <span class="fa fa-trash"></span>
                    <span>{$ ::'Delete Portgroup' | translate $}</span>
                  </a>
                </li>
              </menu>
            </action-list>
          </td>
        </tr>
        <tr ng-repeat-end class="detail-row">
          <td class="detail" colspan="100">
            <hz-detail-row
               template-url="ctrl.portgroupDetailsTemplateUrl">
            </hz-detail-row>
          </td>
        </tr>
        <tr hz-no-items
            items="ctrl.portgroups"
            message="ctrl.noPortgroupsText">
        </tr>
      </tbody>
    </table>
  </div>
</div>

<div class="row">
  <!-- Driver Info -->
  <div class="col-md-6 status detail">
    <h4 translate>Driver Info</h4>
    <hr class="header_rule">
    <div ng-switch="ctrl.node.driver">
      <dl ng-switch-when="pxe_ssh" class="dl-horizontal">
        <dt translate>Driver</dt>
        <dd>{$ ctrl.node.driver | noValue $}</dd>
        <dt translate>SSH Address</dt>
        <dd>{$ ctrl.node.driver_info.ssh_address | noValue $}</dd>
        <dt translate>SSH Port</dt>
        <dd>{$ ctrl.node.driver_info.ssh_port | noValue $}</dd>
        <dt translate>SSH Username</dt>
        <dd>{$ ctrl.node.driver_info.ssh_username | noValue $}</dd>
        <dt ng-if="ssh_key_filename = ctrl.node.driver_info.ssh_key_filename"
            translate>SSH Key File</dt>
        <dd ng-if="ssh_key_filename">
          {$ ssh_key_filename | noValue $}
        </dd>
        <dt ng-if="ssh_password = ctrl.node.driver_info.ssh_password"
            translate>SSH Password</dt>
        <dd ng-if="ssh_password">
          {$ ssh_password | noValue $}
        </dd>
        <dt ng-if="ssh_key_contents = ctrl.node.driver_info.ssh_key_contents"
            translate>SSH Key Contents</dt>
        <dd ng-if="ssh_key_contents">
          {$ ssh_key_contents | noValue $}
        </dd>
        <dt translate>SSH terminal port</dt>
        <dd>{$ ctrl.node.driver_info.ssh_terminal_port | noValue $}</dd>
        <dt translate>Virtualization Software</dt>
        <dd>{$ ctrl.node.driver_info.ssh_virt_type | noValue $}</dd>
        <dt translate>Deploy Kernel</dt>
        <dd>
          <a ng-if="deploy_kernel_is_uuid = angular.isDefined(ctrl.node.driver_info.deploy_kernel) ? ctrl.isUuid(ctrl.node.driver_info.deploy_kernel) : false"
             href="/dashboard/admin/images/{$ ctrl.node.driver_info.deploy_kernel $}/detail">
            {$ ctrl.node.driver_info.deploy_kernel | noValue $}
          </a>
          <span ng-if="!deploy_kernel_is_uuid">
            {$ ctrl.node.driver_info.deploy_kernel | noValue $}
          </span>
        </dd>
        <dt translate>Deploy Ramdisk</dt>
        <dd>
          <a ng-if="deploy_ramdisk_is_uuid = angular.isDefined(ctrl.node.driver_info.deploy_ramdisk) ? ctrl.isUuid(ctrl.node.driver_info.deploy_ramdisk) : false"
             href="/dashboard/admin/images/{$ ctrl.node.driver_info.deploy_ramdisk $}/detail">
            {$ ctrl.node.driver_info.deploy_ramdisk | noValue $}
          </a>
          <span ng-if="!deploy_ramdisk_is_uuid">
            {$ ctrl.node.driver_info.deploy_ramdisk | noValue $}
          </span>
        </dd>
      </dl>
      <dl ng-switch-default class="dl-horizontal">
        <dt ng-repeat-start="(id, value) in ctrl.node.driver_info">{$ id $}</dt>
        <dd ng-repeat-end>{$ value $}</dd>
      </dl>
    </div>
  </div>

  <!-- Validation -->
  <div class="col-md-6 status detail">
    <h4 translate>Driver Validation</h4>
    <hr class="header_rule">

    <table hz-table ng-cloak
           st-table="nodeValidation"
           st-safe-src="ctrl.nodeValidation"
           class="table table-striped table-rsp table-detail">
      <thead>
        <tr>
          <th translate class="rsp-p1" style="white-space:nowrap">
            Interface
          </th>
          <th translate class="rsp-p1">
            Valid
          </th>
          <th translate class="rsp-p1" style="white-space:nowrap">
            Current Interface
          </th>
          <th translate class="rsp-p2" style="width:100%;">
            Reason
          </th>
        </tr>
      </thead>
      <tbody>
        <tr ng-repeat="item in nodeValidation">
          <td class="rsp-p1">
            {$ item.id $}
          </td>
          <td class="rsp-p1" ng-switch="item.result">
            <span ng-switch-when="true" class="fa fa-check text-success"></span>
            <span ng-switch-when="false" class="fa fa-close text-danger"></span>
            <span ng-switch-default class="fa fa-minus"></span>
          </td>
          <td class="rsp-p1">
            <span>
              {$ item.hw_interface $}</span>
          </td>
          <td class="rsp-p2">
            {$ item.reason $}
          </td>
        </tr>
      </tbody>
    </table>
  </div>
</div>

<div class="row">
  <!-- Properties -->
  <div class="col-md-6 status detail">
    <h4 translate>Properties</h4>
    <hr class="header_rule">
    <dl class="dl-horizontal">
      <dt ng-repeat-start="(propertyName, propertyValue) in ctrl.node.properties">
        {$ propertyName $}</dt>
      <dd ng-repeat-end>{$ propertyValue | noValue $}</dd>
    </dl>
  </div>

  <!-- Instance Info -->
  <div class="col-md-6 status detail">
    <h4 translate>Instance Info</h4>
    <hr class="header_rule"/>
    <div ng-switch="ctrl.node.driver">
      <dl ng-switch-when="pxe_ssh" class="dl-horizontal">
        <dt translate>Instance Name</dt>
        <dd>{$ ctrl.node.instance_info.display_name | noValue $}</dd>
        <dt translate>Ramdisk</dt>
        <dd>
          <a href="/dashboard/admin/images/{$ ctrl.node.instance_info.ramdisk $}/detail">
            {$ ctrl.node.instance_info.ramdisk | noValue $}
          </a>
        </dd>
        <dt translate>Kernel</dt>
        <dd>
          <a href="/dashboard/admin/images/{$ ctrl.node.instance_info.kernel $}/detail">
            {$ ctrl.node.instance_info.kernel | noValue $}
          </a>
        </dd>
        <dt translate>Image Source</dt>
        <dd>
          <a href="/dashboard/admin/images/{$ ctrl.node.instance_info.image_source $}/detail">
            {$ ctrl.node.instance_info.image_source | noValue $}
          </a>
        </dd>
        <dt translate>Root GB</dt>
        <dd>{$ ctrl.node.instance_info.root_gb | noValue $}</dd>
      </dl>
      <dl ng-switch-default class="dl-horizontal">
        <dt ng-repeat-start="(id, value) in ctrl.node.instance_info">{$ id $}</dt>
        <dd ng-repeat-end>{$ value | noValue $}</dd>
      </dl>
    </div>
  </div>
</div>

<div class="row">
  <!-- Extra -->
  <div class="col-md-6 status detail">
    <h4 translate>Extra</h4>
    <hr class="header_rule">
    <dl class="dl-horizontal">
      <dt ng-repeat-start="(propertyName, propertyValue) in ctrl.node.extra">
        {$ propertyName $}</dt>
      <dd ng-repeat-end>{$ propertyValue | noValue $}</dd>
    </dl>
  </div>

  <!-- Boot Device -->
  <div class="col-md-6 status detail">
    <h4 translate>Boot Device</h4>
    <hr class="header_rule">
    <dl class="dl-horizontal">
      <dt translate>Device</dt>
      <dd>{$ ctrl.node.bootDevice.boot_device | noValue $}</dd>
      <dt translate>Persistent</dt>
      <dd>{$ ctrl.node.bootDevice.persistent | noValue $}</dd>
    </dl>
  </div>
</div>
